<template>
	<view class="w-100">
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="flex-1 mx-3 mt-2">
				<view class="flex-1 border order-item mb-3" v-for="(item,index) in teamorderList" :key="index">
					<view class="flex-x p-3">
						<view class="flex-1 row-ac">
							<view class="font-s-35 flex-1 in1line">订单号:{{ item.order_number }}</view>
							<view class="pay-status ml-2 font-s-3" v-if="item.is_paid">已付款</view>
							<view class="pay-status ml-2 font-s-3" v-else>未付款</view>
						</view>
						<view class="flex-1 mt-2">
							<view class="flex-1 d-f mb-2" v-for="pro in item.items" :key="pro.id">
								<view class="pro-img">
									<image :src="pro.product.image_list[0].url" mode=""></image>
								</view>
								<view class="flex-1 ml-2">
									<view class="flex-1 row-ac">
										<view class="font-s-35 flex-1 in1line">{{ pro.product.product_name }}</view>
										<view class="font-s-3 text-muted">{{ pro.product.price }}</view>
									</view>
									<view class="row-ac mt-1 font-s-3 text-muted">
										<view class="row-ac flex-1">
											<view class="mt-1 font-s-3 text-muted" v-if="pro.product.spec !== null">
												{{ pro.spec }}
											</view>
											<view class="ml-4">*</view>
											<view class="ml-1">{{ pro.quantity }}</view>
										</view>
										<view>￥{{ pro.product.price * pro.quantity }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="flex-1 mt-3">
							<view class="flex-1 font-s-3 text-muted mt-2">订单用户:{{ item.nickname || item.username }}
							</view>
							<view class="flex-1 font-s-3 text-muted mt-2">收货人:{{ item.consignee }}</view>
							<view class="flex-1 font-s-3 text-muted mt-2">联系电话:{{ item.phone }}</view>
							<view class="flex-1 font-s-3 text-muted mt-2">
								发货方式:{{ item.shipping_method | shippingMethod }}</view>
							<view class="flex-1 font-s-3 text-muted mt-2">
								发货状态:
								<text v-if="item.freight_stata == true" class="freight-stata">已发货</text>
								<text v-else>未发货</text>
							</view>
							<view class="flex-1 font-s-3 text-muted mt-2 row-ac">
								<view class="flex-1 mr-2">收货地址:
									{{ item.province_name }}{{ item.city_name }}{{ item.district_name }}{{ item.address }}
								</view>
								<view class="ml-4 copy-box" @click="paste(item)">复制</view>
							</view>
							<view class="flex-1 font-s-3 text-muted mt-2">报单时间:{{ item.created_time }}</view>

						</view>
						<view class="flex-1 mt-3 row-ac">
							<view class="font-s-4 flex-1">实付金额:<text class="font-s-45">￥{{ item.order_amount }}</text>
							</view>
							<view class="freight-query" v-if="item.freight_stata == true" @click="toFast(item)">查看物流
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		suborderListUrl,
		subordereportPatchUrl,
		suteamorderListUrl
	} from '@/api/index';
	export default {
		data() {
			return {
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				queryInfo: {
					subUserId: '',
					page: 1,
					page_size: 15
				},
				formOrder: {
					is_paid: true,
					payment_method: 3
				},
				teamorderList: [],
				teamorderTotal: ''
			}
		},
		filters: {
			shippingMethod(status) {
				if (status === 0) {
					return '平台发货'
				} else if (status === 1) {
					return '自营'
				} else if (status === 2) {
					return '代发货'
				}
			},
		},
		onLoad(options) {
			this.queryInfo.subUserId = options.subuserId
			this.getSubTeamorderList()
			setTimeout(() => {
				this.loadingState = true;
			}, 2000);
		},
		onReachBottom() {
			this.onReachBottomHandle();
		},
		methods: {
			getSubTeamorderList() {
				this.$R.get(suteamorderListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.teamorderList = res.data.list
						this.teamorderTotal = res.data.total
					}
				})
			},
			onReachBottomHandle() {
				if (this.teamorderTotal != this.teamorderList.length) {
					this.queryInfo.page_size += 15;
					this.getSubTeamorderList()
				}

			},
			paste(item) {
				uni.setClipboardData({
					data: '收货人:' + item.consignee + '，' + '联系电话:' + item.phone + ',' + '地址:' + item.province_name +
						item.city_name + item.district_name + item.address
				});
			},
			toFast(item) {
				console.log(item);
				uni.navigateTo({
					url: '/pages/order/fast-mail?freightNumber=' + item.freight_number + '&orderId=' + item.id
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		background-color: #f7f7f7;

		.pro-img {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.pay-status {
			padding: 6rpx 10rpx;
			border: 1rpx solid #333;
		}

		.receipt-box {
			width: 152rpx;
			height: 72rpx;
			background-color: #000;
			color: #fff;
		}
	}

	.tab-box {
		height: 90rpx;
	}

	.copy-box {
		padding: 5rpx 10rpx;
		border: 1rpx solid #333;
	}

	.freight-stata {
		color: red;
	}

	.freight-query {
		padding: 8rpx 13rpx;
		border: 1rpx solid #333;
		color: #333;
	}
</style>